<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <!-- 
        1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
        2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3. root容器里的代码被称为 [Vue模版] -->

        <!-- root容器 -->
        <div id="root1">
            <h1>Hello,{{name}} {{address}}</h1>
        </div>

        <div id="root2">
            <h1>Hello,{{name.toUpperCase()}} {{address}}</h1>
        </div>

        <script type="text/javascript">
            //创建Vue实例
            new Vue({
                //el选择Vue实例为哪个容器服务
                el:'#root1',
                //data用于存储数据，暂时为一个对象
                data:{
                    name:'崔泽龙',
                    address:'山西晋城'
                }
            })

            //创建Vue实例
            new Vue({
                //el选择Vue实例为哪个容器服务
                el:'#root2',
                //data用于存储数据，暂时为一个对象
                data:{
                    name:'yqr',
                    address:'云南昆明'
                }
            })

        </script>
        
    </body>
</html>